<template>
  <div style="margin: 0 20px; padding: 0px; ">
    <el-row :gutter="20">
      <el-col :span="16">
        <el-button type="plain" text="true" circle @click="handleExpandClick" style="display: inline-block; ">
          <el-icon size="20">
            <DArrowRight v-show="isExpand" />
            <DArrowLeft v-show="isFold"/>
          </el-icon>
        </el-button>
        <el-input placeholder="请输入..." type="text" maxlength="50"
                  v-model="title" style="display: inline-block; width: 80%;">
        </el-input>
      </el-col>
      <el-col :span="8" class="right" style="padding: 0;">
        <el-tooltip
            class="box-item"
            effect="dark"
            content="笔记信息"
            placement="bottom">
          <el-button type="plain" text="true" circle @click="handInfoClick">
            <el-icon size="18"><Warning /></el-icon>
          </el-button>
        </el-tooltip>
        <el-button type="plain" text="true" circle @click="handAddTypeClick">
          <el-icon size="18"><Upload /></el-icon>
        </el-button>
        <el-button type="plain" text="true" circle @click="handAddTypeClick">
          <el-icon size="18"><Download /></el-icon>
        </el-button>
        <el-button type="plain" text="true" circle>
          <el-icon size="20"><MoreFilled /></el-icon>
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import {defineComponent, getCurrentInstance, reactive, toRefs} from "vue";

export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance();

    const state = reactive({
      title: '',  //过滤
      hidePanl: true,
      isExpand: false,
      isFold: true
    })
    //
    const handleExpandClick = () => {
      state.hidePanl = !state.hidePanl
      state.isExpand = !state.hidePanl
      state.isFold = state.hidePanl

      proxy.$bus.emit('hidePanl', state.hidePanl)
      //console.log("hidePanl",  state.hidePanl )
    }
    return {
      ...toRefs(state),
      handleExpandClick,
    }
  }
})

</script>

<style scoped>
.left { text-align: left; padding: 0px;}
.is-circle { padding: 0px; }
.right { text-align: right; }
::v-deep .el-input__wrapper { border: 0; box-shadow: 0 0 0 0; width: 100%;}
::v-deep .el-row { border-bottom: 1px solid #ccc; }
</style>
